<template>

    <el-dialog title="修改征集拍品" :visible="goodsEditShow" @close="dialogClose" width="60%">

        <el-form :model="ruleForm" :rules="rules" ref="goodsEdit" label-width="auto" class="demo-ruleForm">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="拍品名称" prop="name">
                        <el-input type="text" v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="拍品所在地" prop="goodAddress">
                        <el-select type="text" v-model="ruleForm.goodAddress" class="select" placeholder="省"></el-select>
                    </el-form-item>
                    <el-form-item label="卖家所在地" prop="sellerAddress">
                        <el-select type="text" v-model="ruleForm.sellerAddress" class="select" placeholder="省"></el-select>
                    </el-form-item>
                    <el-form-item label="资产描述" prop="describe">
                        <el-input type="textarea" v-model="ruleForm.describe"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="company">
                        <el-input type="text" v-model="ruleForm.company"></el-input>
                    </el-form-item>
                    <el-form-item label="征集时间" prop="date">
                        <el-date-picker v-model="ruleForm.date" type="datetime" placeholder="选择日期时间" style="width:100%">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="商品状态" prop="state">
                        <el-select v-model="ruleForm.state" style="width:100%" clearable>
                            <el-option label="沟通中" value="0"></el-option>
                            <el-option label="未沟通" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否取得联系：" prop="touch">
                        <el-select v-model="ruleForm.touch" class="select" clearable>
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="拍品类型" prop="type">
                        <el-input type="text" v-model="ruleForm.type"></el-input>
                    </el-form-item>
                    <el-form-item prop="goodCity" label-width="0px">
                        <el-select type="text" v-model="ruleForm.goodCity" class="select" placeholder="市"></el-select>
                    </el-form-item>
                    <el-form-item prop="sellerCity" label-width="0px">
                        <el-select type="text" v-model="ruleForm.sellerCity" class="select" placeholder="市"></el-select>
                    </el-form-item>
                    <el-form-item label="图片" prop="photo">
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        v-model="ruleForm.certificatePhoto">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="tel">
                        <el-input type="text" v-model="ruleForm.tel"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item>
                <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
                </el-button>
                <el-button @click="dialogClose" class="pull-right">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>
<script>
export default {
    data () {
        return {
            ruleForm: {
                name: '',
                type: '',
                goodAddress: '',
                goodCity: '',
                sellerAddress: '',
                sellerCity: '',
                describe: '',
                photo: '',
                company: '',
                tel: '',
                date: '',
                touch: '',
                state: '',

            },
            goodsEditShow:false,
            rules: {
                title: [
                    { required: true, message: '请输入商品名称', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请输入商品类型', trigger: 'change' }
                ],
                goodAddress: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                goodCity: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                sellerAddress: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                sellerCity: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                describe: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                photo: [
                    { required: false, trigger: 'change' }
                ],
                company: [
                    { required: true, message: '请输入联系公司名称', trigger: 'change' }
                ],
                tel: [
                    { required: true, message: '请输入联系电话', trigger: 'change' },
                ],
                date: [
                    { required: true, message: '选择确认征集时间', trigger: 'change' }
                ],
                touch: [
                    { required: true, message: '请确认是否取得联系', trigger: 'change' }
                ],
                state: [
                    { required: true, message: '请选择商品状态', trigger: 'change' }
                ]
            }
        };
    },
    props: {
        goodsEditShow: {
            type: Boolean
        },
        recored: {
            type: Object
        }
    },
    methods: {

        submitForm () {
            this.$refs.goodsEdit.validate((valid) => {
                if (valid) {
                    this.$emit('dialogClose');
                }
                else {
                    return ;
                }
            });
        },

        // 重置
        // resetForm (formName) {
        //     this.$refs[formName].resetFields();
        // },
        dialogClose () {
            this.$emit('dialogClose')
        },

    },
    mounted () {
        console.log(this.recored)
        this.ruleForm = this.recored

    }

}

</script>
<style lang="less" scoped>
.select{
    width: 100%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>